<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'choose/previewImage'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-form>
			<onekit-view onekit-class="page-section">
				<onekit-view onekit-class="weui-cells weui-cells_after-title">
					<onekit-view onekit-class="weui-cell weui-cell_input">
						<onekit-view onekit-class="weui-cell__hd">
							<onekit-view onekit-class="weui-label">图片来源</onekit-view>
						</onekit-view>
						<onekit-view onekit-class="weui-cell__bd">
							<onekit-picker :range="sourceType" :value="sourceTypeIndex" mode="selector" @Change="sourceTypeChange">
								<onekit-view onekit-class="weui-input">{{sourceType[sourceTypeIndex]}}</onekit-view>
							</onekit-picker>
						</onekit-view>
					</onekit-view>
					<onekit-view onekit-class="weui-cell weui-cell_input">
						<onekit-view onekit-class="weui-cell__hd">
							<onekit-view onekit-class="weui-label">图片质量</onekit-view>
						</onekit-view>
						<onekit-view onekit-class="weui-cell__bd">
							<onekit-picker :range="sizeType" :value="sizeTypeIndex" mode="selector" @Change="sizeTypeChange">
								<onekit-view onekit-class="weui-input">{{sizeType[sizeTypeIndex]}}</onekit-view>
							</onekit-picker>
						</onekit-view>
					</onekit-view>
					<onekit-view onekit-class="weui-cell weui-cell_input">
						<onekit-view onekit-class="weui-cell__hd">
							<onekit-view onekit-class="weui-label">数量限制</onekit-view>
						</onekit-view>
						<onekit-view onekit-class="weui-cell__bd">
							<onekit-picker :range="count" :value="countIndex" mode="selector" @Change="countChange">
								<onekit-view onekit-class="weui-input">{{count[countIndex]}}</onekit-view>
							</onekit-picker>
						</onekit-view>
					</onekit-view>
				</onekit-view>
				<onekit-view onekit-class="weui-cells">
					<onekit-view onekit-class="weui-cell">
						<onekit-view onekit-class="weui-cell__bd">
							<onekit-view onekit-class="weui-uploader">
								<onekit-view onekit-class="weui-uploader__hd">
									<onekit-view onekit-class="weui-uploader__title">点击可预览选好的图片</onekit-view>
									<onekit-view onekit-class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</onekit-view>
								</onekit-view>
								<onekit-view onekit-class="weui-uploader__bd">
									<onekit-view onekit-class="weui-uploader__files">
										<template v-for="(image,index) in imageList">
											<onekit-view :key="index" onekit-class="weui-uploader__file">
												<onekit-image onekit-class="weui-uploader__img" :src="image" :data-src="image" @Tap="previewImage"></onekit-image>
											</onekit-view>
										</template>
									</onekit-view>
									<onekit-view onekit-class="weui-uploader__input-box">
										<onekit-view onekit-class="weui-uploader__input" @click.native="chooseImage"></onekit-view>
									</onekit-view>
								</onekit-view>
							</onekit-view>
						</onekit-view>
					</onekit-view>
				</onekit-view>
			</onekit-view>
		</onekit-form>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "图片",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
const sourceType = [
  [
    'camera'
  ],
  [
    'album'
  ],
  [
    'camera',
    'album'
  ]
];
const sizeType = [
  [
    'compressed'
  ],
  [
    'original'
  ],
  [
    'compressed',
    'original'
  ]
];
export default Page(ONEKIT_JSON,["sourceType","sourceTypeIndex","sizeType","sizeTypeIndex","count","countIndex","imageList","length","/"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'图片',
        "path":'packageAPI/pages/image/image'
};
    },
    "data":{
        "imageList":[
        ],
        "sourceTypeIndex":2,
        "sourceType":[
          '拍照',
          '相册',
          '拍照或相册'
        ],
        "sizeTypeIndex":2,
        "sizeType":[
          '压缩',
          '原图',
          '压缩或原图'
        ],
        "countIndex":8,
        "count":[
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9
        ]
},
    "sourceTypeChange"(e){
      this.setData({
        "sourceTypeIndex":e.detail.value
});
    },
    "sizeTypeChange"(e){
      this.setData({
        "sizeTypeIndex":e.detail.value
});
    },
    "countChange"(e){
      this.setData({
        "countIndex":e.detail.value
});
    },
    "chooseImage"(){
      const that = this;
      wx.chooseImage({
        "sourceType":sourceType[this.data.sourceTypeIndex],
        "sizeType":sizeType[this.data.sizeTypeIndex],
        "count":this.data.count[this.data.countIndex],
        "success"(res){
          console.log(res);
          that.setData({
            "imageList":res.tempFilePaths
});
        }
});
    },
    "previewImage"(e){
      const current = e.target.dataset.src;
      wx.previewImage({
        current,
        "urls":this.data.imageList
});
    }
});

</script>
<style 
 lang="css">
@import '/common/lib/weui.css';
</style>